<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-08-24 15:28:20
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-08-24 15:48:12
 * @FilePath: \出口买家端\src\views\Order\components\PackingInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-popover width="1200" placement="bottom" trigger="click" title="装箱信息">
    <template #reference>
      <span class="c-blue pointer">查看</span>
    </template>
    <c-table-template border :data="list">
      <el-table-column align="center" label="集装箱号" prop="no">
      </el-table-column>
      <el-table-column align="left" label="车辆信息" prop="carInfo" width="350">
        <template #default="scope">
          <div v-for="(item, index) in scope.row.carInfoList" :key="index">
            {{ item }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车架号">
        <template #default="scope">
          <div v-for="(item, index) in scope.row.vinList" :key="index">
            {{ item }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="集装箱尺寸">
        <template #default="scope">
          <div>{{ scope.row.size }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="重量/KG">
        <template #default="scope">
          {{ scope.row.weight }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="装箱照片">
        <template #default="scope">
          <span
            class="pointer c-blue"
            @click="onFileOpen(scope.row.packingPicList)"
            >查看</span
          >
        </template>
      </el-table-column>
    </c-table-template>
    <div class="f-s-14 c-5E6163 mt-lg">
      合计：{{ list.length }}个集装箱，共计{{ getContainerCarNums }}台
    </div>
  </el-popover>
</template>
<script setup>
import { computed } from "vue";
import { onFileOpen } from "@/utils/index.js";
const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
});
const list = computed({
  get: () => {
    return props.modelValue;
  },
});

const getContainerCarNums = computed(() => {
  const number = (list.value || [])
    .map((x) => {
      return (x.vinList || []).length;
    })
    .reduce((x, y) => {
      return x + y;
    }, 0);
  return number;
});
</script>
<style lang="less" scoped>
.goods-tab {
  border-top: 1px solid #e9e9e9;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
}
.c-5E6163 {
  color: #5e6163;
}
</style>